<%--
  Function: 
  User: PING
  Date: 2022/10/27

--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/xhr.js"></script>
    <script src="js/selectCity.js"></script>
    <script src="js/doRate.js"></script>
</head>
<body>

<h3>AJAX 演示例子</h3>
请选择对应国家：<select id="nation" name="nation" onchange="selectCity();">
             <option value="0" selected>--</option>
            <option value="1">中国</option>
            <option value="2">美国</option>
            <option value="3">日本</option>
            </select>
请选择喜欢城市： <select id="city" name="city">
                    <option value="0">--</option>
                </select>

<br><hr>
<h3>Ajax: POST 演示</h3>
<form id="rating-form">
    你对课程的评分：<br>
    <input type="radio" name="rating" value="5">5
    <input type="radio" name="rating" value="4">4
    <input type="radio" name="rating" value="3">3
    <input type="radio" name="rating" value="2">2
    <input type="radio" name="rating" value="1">1
    <br>
    理由是：<br>
    <textarea id="comment" cols="20" rows="5" ></textarea><br>
    <input type="button" value="确定" onclick="doRateByJson();"/>
</form>
<div id="showMsg" style="border:1px solid green; display:none; width:50%">
</div>


<script>

    function doRateByJson() {
        // 1. preparing parameters
        var $ratingForm = document.getElementById("rating-form");
        var rating ;
        // got rating value
        $ratingForm.rating.forEach(function(item,index) {
            if (item.checked) {
                rating = item.value ;
            }
        })
        var comment = document.getElementById("comment").value ;
        // js object
        var ratingformData = {
            'rating':rating,
            'comment': comment
        }

        // var paramStr = "rating=" + rating + "&comment=" + comment ;
        // 2. create XHR
        var xhr = createXMLHttpRequest() ;
        // 3. open
        xhr.open(
            "POST",
            "/01_jspBasics/test/ratingByJson"
        )
        // 4.callback
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    console.log("got response: " + xhr.responseText) ;
                    // parsing response text: rating&comment
                   var respObj = JSON.parse(xhr.responseText) ;
                    var $showMsg = document.getElementById("showMsg") ;
                    $showMsg.innerHTML = "" ;
                    $showMsg.innerHTML += respObj.rating + "<br>" ;
                    $showMsg.innerHTML += respObj.comment + "<br>" ;
                    $showMsg.innerHTML += respObj.msg + "<br>" ;
                    $showMsg.style.display = "" ;
                } else {
                    alert("处理出错： "+ xhr.statusText) ;
                }

            }


        }
        // 5. send: only for POST request.
        var formDataJsonString = JSON.stringify(ratingformData) ;
        xhr.send(formDataJsonString) ;




    }



</script>







</body>
</html>
